<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"
    import="java.util.List"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<head>
    <meta charset="UTF-8">
    <title>Attendance check</title>
    <link rel="stylesheet" href="css/normalize.css" />
    <link rel="stylesheet" href="css/main.css" />
    <link rel="stylesheet" href="css/icons.css" />
    <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
</head>
<body>
    <div class="wrapper wcol-12">
        <div class="header">
            <ul class="header__nav col-9">
                <li><a href="admin">Teachers</a></li>
                <li><a href="admin?database" >Database</a></li>
                <li class="header__nav--active"><a href="admin_support" >Support</a></li>
            </ul>
            <ul class="header__nav--right">
                <li>
                    <a href="#"><c:out value="${admin.id} "></c:out></a>
                    <!-- <ul class="header__nav--dropdown">
                        <li><a href="#">Account settings</a></li>
                        <li><a href="#">Log out</a></li>
                    </ul> -->
                </li>
                <li><a href="admin?logout">Log out</a></li>
            </ul>
        </div>
        <div class="content">
            <table class="content__list col-12">
                <thead>
                    <tr>
                        <th>From:</th>
                        <th>Question</th>
                        <th>Status</th>
                        
                    </tr>
                </thead>
                <tbody>
                    <div class="scrollable">
                    <c:forEach items="${questions}" var="oneQuestion">
                    <tr data-col="${oneQuestion.question_id}">
                    	<td>
                    		<c:out value="${oneQuestion.teacher_name}"></c:out>
                    	</td>
                    	<td>
                    		<c:out value="${oneQuestion.question}"></c:out>
                    	</td>
                    
                    	
                     		<c:set var="answer" value="${oneQuestion.answer}"/>
                        	<c:choose>
                    			<c:when test="${fn:length(answer)>0}">
                        			<td style="color:green">reviewed</td>
                    			</c:when>
                    			<c:otherwise>
                    			    <td style="color:red"> new</td>
                    			</c:otherwise>
                    		</c:choose>
                    	
                      
                    	
                    </tr>
                    </c:forEach>
                    </div>
                </tbody>
            </table>
            <a href="#" class="btn-green" id="question-answer"><i class="i-add73"></i>Answer</a>
            <a href="#" id="question-delete" class="btn-red">Delete question</a>
        </div>
        <div class="footer"></div>
    </div>
    <script type="text/javascript">
    $(document).ready(function() {
        $("table tbody tr").click(function() {
            var t = $(this);
            t.toggleClass("selected");
            t.siblings().removeClass("selected");
            $("#question-delete").attr("href", "/admin_support?command=delete&id=" + t.attr("data-col"));
            $("#question-answer").attr("href", "admin_support?command=answer&id=" + t.attr("data-col"));
        });

        $("#question-delete").click(function(ev) {
            ev.preventDefault();
            var id = $(".selected").attr("data-col");
            $.ajax({
            	url: "admin_support",
            	type: "POST",
            	data: "command=delete&id=" + encodeURIComponent(id),
            	success: function (resp) {
            		if (resp == 0)
            			alert("Some error at server side occured, please try again later");
            		if (resp == 1)
            			$(".selected").remove();
            	}
            });
        });
      
        
      
    });
    </script>
</body>
</html>